<template>
  <el-dialog
    v-el-drag-dialog
    title="地址"
    :visible.sync="visible"
    width="1024px"
  >
    <baidu-map
      class="bm-view"
      :center="center"
      :zoom="zoom"
      @ready="handler"
    >
      <bm-marker
        :position="{lng: 116.404, lat: 39.915}"
        :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE"
        @click="infoWindowOpen"
      >
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">我爱北京天安门</bm-info-window>
        <bm-label content="我爱北京天安门" :label-style="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}" />
      </bm-marker>
    </baidu-map>
  </el-dialog>
</template>

<script>

  export default {
    name: 'location',
    data() {
      return {
        visible: false,
        center: { lng: 0, lat: 0 },
        zoom: 3,
        show: false
      }
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      handler({ BMap, map }) {
        this.center.lng = 116.404
        this.center.lat = 39.915
        this.zoom = 15
      },
      infoWindowClose() {
        this.show = false
      },
      infoWindowOpen() {
        this.show = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bm-view {
    width: 100%;
    height: 500px;
  }
</style>
